<template>
    <div class="box"
         :style="{ height: screenHeight, width: screenWidth }">
        <div class="grid-content">
            <div class="public-box">
                <div class="one-grid"></div>
                <div class="two-grid">
                    宅-智能停车({{ communityInfo.name }})
                </div>
                <div class="three-grid">总车位数：
                    <span class="title3">{{ head.count }}</span>

                </div>
                <div class="three-grid">剩余车位数：
                    <span class="title3">{{ head.count - head.present }}</span>
                </div>
                <div class="four-grid">当班应收总额：
                    <span class="title3">{{ head.total_amount }}</span>（元）
                </div>
                <div class="four-grid">欢迎您,{{ userInfo.name }} </div>
                <div class="five-grid"
                     @click="changeHanban()">换班</div>
                <!-- <div class="qi-grid">
          <span v-if="peeling === '白色背景'" @click="changeTheme('#1c2536')">(切换)默认背景</span>
          <span v-else @click="changeTheme('#ffffff')">(切换)白色背景</span>
        </div> -->
            </div>
        </div>
        <div class="two-content">
            <div class="two-content-box">
                <div class="vidoes essas">
                    <div v-if="!iscamera"
                         class="camera-1">
                        <span class="camera-1-1"></span>
                    </div>
                    <div v-if="iscamera"
                         class="camera-4">
                        <Camera ref="camera"
                                :ws="ws" />
                    </div>
                    <div v-else
                         class="camera-2">
                        <div class="camera-2-1"
                             v-for="(item, index) in cameraData"
                             :key="index"
                             @click="changeCamera(item)">{{ item.name }}{{ item.type==1?'入口':'出口' }}</div>
                    </div>
                    <div class="camera-3">
                        <span class="camera-3-1"
                              @click="changeCameraqie()"></span>
                    </div>
                </div>
                <div class="texts essas"
                     style="margin-left: 2%;">
                    <div class="text-1">
                        <div class="text-1-1">
                            <img v-if="snData.smallimg"
                                 :src="snData.smallimg"
                                 alt="">
                        </div>
                        <div class="text-1-2">{{ snData.license }}</div>
                    </div>
                    <div class="text-2">
                        <div class="text-2-1"
                             v-if="snStatus == 1">
                            <div>车牌号:{{snData.license }}</div>
                            <div>车辆品牌:--</div>
                            <div>车辆颜色:--</div>
                            <div>进场时间:{{snData.create_time }}</div>
                            <div>车位号:--</div>
                        </div>
                        <div class="text-2-2"
                             v-else>
                            <div class="text-2-2-1">收费金额:</div>
                            <div>车牌号:{{snData.license }}</div>
                            <div>车辆品牌:--</div>
                            <div>车辆颜色:--</div>
                            <div>进场时间:{{snData.create_time }}</div>
                            <div>出场时间:</div>
                            <div>停车时长:{{ getDateTime(snData.entry_time, snData.exit_time) || '-' }}</div>
                        </div>
                    </div>
                </div>
                <div class="vidoes essas"
                     style="margin-left: 2%;">
                    <div v-if="!iscamera1"
                         class="camera-1">
                        <span class="camera-1-1"></span>
                    </div>
                    <div v-if="iscamera1"
                         class="camera-4">
                        <Cameratwo ref="cameratwo"
                                   :ws1="ws1" />
                    </div>
                    <div v-else
                         class="camera-2">
                        <div class="camera-2-1"
                             v-for="(item, index) in cameraData"
                             :key="index"
                             @click="changeCamera1(item)">{{ item.name }}{{ item.type==1?'入口':'出口' }}</div>
                    </div>
                    <div class="camera-3">
                        <span class="camera-3-1"
                              @click="changeCameraqie1()"></span>
                    </div>
                </div>
                <div class="texts essas"
                     style="margin-left: 2%;">
                    <div class="text-1">
                        <div class="text-1-1">
                            <img v-if="sn1Data.smallimg"
                                 :src="sn1Data.smallimg"
                                 alt="">
                        </div>
                        <div class="text-1-2">{{ sn1Data.license }}</div>
                    </div>
                    <div class="text-2">
                        <div class="text-2-1"
                             v-if="sn1Status == 1">
                            <div>车牌号:{{sn1Data.license }}</div>
                            <div>车辆品牌:--</div>
                            <div>车辆颜色:--</div>
                            <div>进场时间:{{sn1Data.create_time }}</div>
                            <div>车位号:--</div>
                        </div>
                        <div class="text-2-2"
                             v-else>
                            <div class="text-2-2-1">收费金额:</div>
                            <div>车牌号:{{sn1Data.license }}</div>
                            <div>车辆品牌:--</div>
                            <div>车辆颜色:--</div>
                            <div>进场时间:{{sn1Data.create_time }}</div>
                            <div>出场时间:</div>
                            <div>停车时长:{{ getDateTime(sn1Data.entry_time, sn1Data.exit_time) || '-' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="three-content">
            <div class="three-content-box">
                <div :class="'bg-img' + bgImg">
                    <div class=" three-content-box-1">
                        <span class="box-span-1"
                              @click="enter(1)">进出记录</span>
                        <span class="box-span-2"
                              @click="enter(2)">当前在场车辆</span>
                        <span class="box-span-3"
                              @click="enter(3)">在场无牌车</span>
                        <span class="box-span-4"
                              @click="enter(4)">设备连网</span>
                        <span class="box-span-4"
                              @click="circumstancesok()">特殊情况出场</span>
                        <span class="box-span-4"
                              @click="situationtkok()">未识别车辆入场</span>
                        <span class="box-span-5">
                            <input type="text"
                                   placeholder="请输入搜索类容"
                                   v-model="searches" />
                            <span class="one"
                                  @click="Searches()">
                                <img src="../assets/search.png"
                                     alt />
                            </span>
                        </span>
                    </div>
                    <div class=" three-content-box-2">
                        <div class="three-content-box-table"
                             v-if="bgImg == 1">
                            <el-table :data="tableData"
                                      style="width: 100%">
                                <el-table-column prop="license"
                                                 label="车牌号"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.license || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="rent"
                                                 label="类型"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.rent === 1">临停车</span>
                                        <span v-else-if="row.rent === 2">私家车</span>
                                        <span v-else-if="row.rent === 3">月租车</span>
                                        <span v-else>私家车</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="mobile"
                                                 label="联系电话"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.mobile || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name"
                                                 label="联系人"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.name || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="入场时间"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.method"> {{ getDate(row.entry_time) || '-' }}</span>
                                        <span v-else>{{ row.create_time || '-' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="入口"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.method&&row.inletdoor">{{ row.inletdoor.name || '-' }}</span>
                                        <span v-else>{{ row.door.name || '-' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="出场时间"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.exit_time"> {{ getDate(row.exit_time) || '-' }}</span>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="出口"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.method">{{ row.door.name || '-' }}</span>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="停车时间"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.method">{{ getDateTime(row.entry_time, row.exit_time) || '-' }}</span>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="money"
                                                 label="优惠金额"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.money || '0.00' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="price"
                                                 label="收费金额"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.price || '0.00' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="camera_internet_state"
                                                 label="操作"
                                                 min-width="200">
                                    <template slot-scope="{row}">
                                        <span class="btn3"
                                              v-if="!row.method"
                                              @click="Modifythes(row)">修改</span>
                                        <span class="btn2"
                                              @click="open(row)">开闸</span>
                                        <span class="btn1"
                                              v-if="!row.method"
                                              @click="appearing(row)">出场</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="three-content-box-table"
                             v-if="bgImg == 2">
                            <el-table :data="tableData"
                                      style="width: 100%">
                                <el-table-column prop="license"
                                                 label="车牌号"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.license || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="rent"
                                                 label="类型"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.rent === 1">临停车</span>
                                        <span v-else-if="row.rent === 2">私家车</span>
                                        <span v-else-if="row.rent === 3">月租车</span>
                                        <span v-else>私家车</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="mobile"
                                                 label="联系电话"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.mobile || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name"
                                                 label="联系人"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.name || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="入场时间"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.method"> {{ getDate(row.entry_time) || '-' }}</span>
                                        <span v-else>{{ row.create_time || '-' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="入口"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        <span v-if="row.method">{{ row.inletdoor.name || '-' }}</span>
                                        <span v-else>{{ row.door.name || '-' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="camera_internet_state"
                                                 label="操作"
                                                 min-width="200">
                                    <template slot-scope="{row}">
                                        <span class="btn3"
                                              @click="Modifythes(row)">修改</span>
                                        <span class="btn1"
                                              @click="appearing(row)">出场</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="three-content-box-table"
                             v-if="bgImg == 3">
                            <el-table :data="tableData"
                                      stripe
                                      style="width: 100%">
                                <el-table-column prop="license"
                                                 label="车牌号"
                                                 min-width="100">
                                    <template slot-scope="{ row}">
                                        {{ row.license || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="mobile"
                                                 label="联系电话"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.mobile || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name"
                                                 label="联系人"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.name || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="入场时间"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        <span v-if="row.method"> {{ getDate(row.entry_time) || '-' }}</span>
                                        <span v-else>{{ row.create_time || '-' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="入口"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        <span v-if="row.method">{{ row.inletdoor.name || '-' }}</span>
                                        <span v-else>{{ row.door.name || '-' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="camera_internet_state"
                                                 label="操作"
                                                 min-width="200">
                                    <template slot-scope="{row}">
                                        <span class="btn3"
                                              @click="Modifythes(row)">修改</span>
                                        <span class="btn1"
                                              @click="appearing(row)">出场</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="three-content-box-table"
                             v-if="bgImg == 4">
                            <el-table :data="tableData"
                                      style="width: 100%">
                                <el-table-column label="设备名称"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.name || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="设备IP"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.host || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="设备SN"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.sn || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="出入口"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        <span v-if="row.type === 1">入口</span>
                                        <span v-else>出口</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="最后识别车牌"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ row.lastcar || '-' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="识别时间"
                                                 min-width="100">
                                    <template slot-scope="{row}">
                                        {{ getDate(row.lasttime) || '-' }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--登录弹框-->
        <el-dialog :visible.sync="dialogVisibleLog"
                   :close-on-click-modal="false"
                   :show-close="false">
            <div class="login">
                <div class="login-titel">
                    <div class="login-titel-1">{{ logName }}</div>
                    <div v-if="logName == '换班'"
                         class=" login-titel-2"
                         @click="del()">
                        <div class="login-titel-2-1"></div>
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">账号:</div>
                    <div class="anount-input">
                        <el-input v-model="logFrom.mobile"
                                  type="text" />
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">密码:</div>
                    <div class="anount-input">
                        <el-input v-model="logFrom.password"
                                  type="password"
                                  show-password />
                    </div>
                </div>
                <div class="anount">
                    <div class="button"
                         @click="logins">下一步</div>
                </div>
            </div>
        </el-dialog>
        <!--小区弹框-->
        <el-dialog width="60%"
                   :visible.sync="dialogVisiblexq"
                   :show-close="false"
                   :close-on-click-modal="false">
            <div class="SelectcarPark">
                <div class="SelectcarPark-titel">选择停车场</div>
                <div class="SelectcarPark-zimu">
                    <div @click="selectQb(letter.name)"
                         v-for="letter in letters"
                         :key="letter.id"
                         :class="letter.name == '全部' ? 'zimu-2' : 'zimu-1'"
                         :style="letter.name == zimu ? 'color:#4f93b1' : ''">
                        {{ letter.name }}</div>
                </div>
                <div class="SelectcarPark-name">
                    <div :class="communityInfo.id == item.id ? 'SelectcarPark-name-2' : 'SelectcarPark-name-1'"
                         @click="wyClickHandler(item)"
                         v-for="(item, index) in communityData"
                         :key="index">
                        {{ item.name }}</div>
                </div>
                <div class="SelectcarPark-btn">
                    <div class="button"
                         @click="xqnet()">下一步</div>
                </div>
            </div>
        </el-dialog>
        <!--门岗弹框-->
        <el-dialog :visible.sync="dialogVisiblemg"
                   :show-close="false"
                   :close-on-click-modal="false">
            <div class="Choosethepast">
                <div class="Choosethepast-titel">选择{{ communityInfo.name }}停车场的值守门岗</div>

                <div class="checkboxes">
                    <div class="checkboxes_one">
                        <input @click="allClick()"
                               type="checkbox"
                               v-model="all_checked" />
                        <label class="table">全选</label>
                    </div>
                    <div class="checkboxes_two">
                        <span class="check_one"
                              v-for="(item, index) in doorData"
                              :key="index">
                            <input v-model="item.checked"
                                   type="checkbox" />
                            <label class="table">{{ item.name }}</label>
                        </span>
                    </div>
                </div>
                <div class="button">
                    <div class="buttons"
                         @click="summbitdoor">确定</div>
                </div>
            </div>
        </el-dialog>
        <!--出场弹框-->
        <el-dialog :visible.sync="dialogVisibleAppearing"
                   :show-close="false"
                   :close-on-click-modal="false">
            <div class="appearing">
                <div class="login-titel">
                    <div class="login-titel-1">出场结算</div>
                    <div class=" login-titel-2"
                         @click="dels()">
                        <div class="login-titel-2-1"></div>
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">出口:</div>
                    <div class="anount-input">
                        <el-select class="selectes"
                                   :popper-append-to-body="false"
                                   popper-class="select-option"
                                   v-model="outFromSn"
                                   placeholder="请选择出口"
                                   @change="selectOption">
                            <el-option v-for="item in outCameraData"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.sn"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="anount">
                    <div class="button"
                         @click="appearingBtn()">确定</div>
                </div>
            </div>
        </el-dialog>
        <!--修改弹框-->
        <el-dialog :visible.sync="dialogVisibleMod"
                   :close-on-click-modal="false"
                   :show-close="false">
            <div class="car-mod">
                <div class="login-titel">
                    <div class="login-titel-1">修改车牌号</div>
                    <div class=" login-titel-2"
                         @click="modcp()">
                        <div class="login-titel-2-1"></div>
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">车牌号:</div>
                    <div class="anount-input">
                        <el-input v-model="modFrom.license"
                                  type="text"
                                  @focus="focusj('license')" />
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">电话:</div>
                    <div class="anount-input">
                        <el-input v-model="modFrom.mobile"
                                  @focus="focusj('mobile')" />
                    </div>
                </div>
                <div class="anount">
                    <div class="button"
                         @click="modBtn()">确定</div>
                </div>
            </div>
            <!--键盘弹框-->
            <div class="keyboard"
                 v-if="dialogVisible">
                <div class="content">
                    <div class="content-one">
                        <div class="number-one"
                             v-for="(item, index) in inputWord"
                             :key="index"
                             @click="numberkey(item)">{{ item }}
                        </div>
                    </div>
                    <div class="content-two">
                        <div class="number-one"
                             v-for="(item, index) in inputScope"
                             :key="index"
                             @click="numberkey(item)">{{ item == 'I' ? 'I' : item }}</div>
                    </div>
                </div>
                <div class="content-number">
                    <div class="head">
                        <div class="del"
                             @click="delkey()"></div>
                    </div>
                    <div class="number">
                        <div class="number-one"
                             v-for="(item, index) in inputNumber"
                             :key="index"
                             @click="numberkey(item)">{{ item }}
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--特殊情况出场弹框-->
        <el-dialog :visible.sync="circumstances"
                   :close-on-click-modal="false"
                   :show-close="false">
            <div class="circumstances-mod">
                <div class="login-titel">
                    <div class="login-titel-1">特殊情况出场</div>
                    <div class=" login-titel-2"
                         @click="circumstancesdel()">
                        <div class="login-titel-2-1"></div>
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">车牌号:</div>
                    <div class="anount-input">
                        <el-input v-model="sumbitFrom.license"
                                  type="text"
                                  @focus="focucirc('license')" />
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">电话:</div>
                    <div class="anount-input">
                        <el-input v-model="sumbitFrom.mobile"
                                  @focus="focucirc('mobile')" />
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">设备:</div>
                    <div class="anount-input">
                        <el-select class="selectes"
                                   :popper-append-to-body="false"
                                   popper-class="select-option"
                                   v-model="outFromSn"
                                   placeholder="请选择出口"
                                   @change="selectOption">
                            <el-option v-for="item in outCameraData"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.sn"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="anount">
                    <div class="button"
                         @click="sumbitAdd()">确定</div>
                </div>
            </div>
            <div class="keyboard"
                 v-if="dialogVisible">
                <div class="content">
                    <div class="content-one">
                        <div class="number-one"
                             v-for="(item, index) in inputWord"
                             :key="index"
                             @click="numberkey(item)">{{ item }}
                        </div>
                    </div>
                    <div class="content-two">
                        <div class="number-one"
                             v-for="(item, index) in inputScope"
                             :key="index"
                             @click="numberkey(item)">{{ item == 'I' ? 'I' : item }}</div>
                    </div>
                </div>
                <div class="content-number">
                    <div class="head">
                        <div class="del"
                             @click="delkey()"></div>
                    </div>
                    <div class="number">
                        <div class="number-one"
                             v-for="(item, index) in inputNumber"
                             :key="index"
                             @click="numberkey(item)">{{ item }}
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--特殊情况入场弹框-->
        <el-dialog :visible.sync="situationtk"
                   :close-on-click-modal="false"
                   :show-close="false">
            <div class="circumstances-mod">
                <div class="login-titel">
                    <div class="login-titel-1">特殊情况出场</div>
                    <div class=" login-titel-2"
                         @click="circumstancesdel()">
                        <div class="login-titel-2-1"></div>
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">车牌号:</div>
                    <div class="anount-input">
                        <el-input v-model="sumbitFrom.license"
                                  type="text"
                                  @focus="focucirc('license')" />
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">电话:</div>
                    <div class="anount-input">
                        <el-input v-model="sumbitFrom.mobile"
                                  @focus="focucirc('mobile')" />
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">设备:</div>
                    <div class="anount-input">
                        <el-select class="selectes"
                                   :popper-append-to-body="false"
                                   popper-class="select-option"
                                   v-model="outFromSn"
                                   placeholder="请选择入口"
                                   @change="selectOption">
                            <el-option v-for="item in outCameraData"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.sn"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="anount">
                    <div class="button"
                         @click="sumbitedail()">确定</div>
                </div>
            </div>
            <div class="keyboard"
                 v-if="dialogVisible">
                <div class="content">
                    <div class="content-one">
                        <div class="number-one"
                             v-for="(item, index) in inputWord"
                             :key="index"
                             @click="numberkey(item)">{{ item }}
                        </div>
                    </div>
                    <div class="content-two">
                        <div class="number-one"
                             v-for="(item, index) in inputScope"
                             :key="index"
                             @click="numberkey(item)">{{ item == 'I' ? 'I' : item }}</div>
                    </div>
                </div>
                <div class="content-number">
                    <div class="head">
                        <div class="del"
                             @click="delkey()"></div>
                    </div>
                    <div class="number">
                        <div class="number-one"
                             v-for="(item, index) in inputNumber"
                             :key="index"
                             @click="numberkey(item)">{{ item }}
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 出场结算 -->
        <div class="chuangchangjiesuan"
             v-if="chuchangjiesuan">
            <div class="chuangchangjiesuan-one">
                <p class="title">
                    应收金额（元）：
                    <span>{{ccjiesuan.price}}</span>
                </p>
                <div class="input">
                    <div>
                        <p>车牌号</p>
                        <input type="text"
                               :value="ccjiesuan.license" />
                    </div>
                    <div>
                        <p>电话号码</p>
                        <input type="text"
                               :value="ccjiesuan.mobile" />
                    </div>
                    <div style="margin-left:33px!important;">
                        <p>停车时长</p>
                        <input type="text"
                               :value="ccjiesuan.car_stay" />
                    </div>
                    <div>
                        <p>优惠金额（元）</p>
                        <input type="text"
                               :value="ccjiesuan.money" />
                    </div>
                </div>
                <div class="input">
                    <div>
                        <p>入口</p>
                        <input type="text"
                               :value="ccjiesuan.door_post_name" />
                    </div>
                    <div>
                        <p>入场时间</p>
                        <input type="text"
                               :value="ccjiesuan.entry_time" />
                    </div>
                    <div style="margin-left:33px!important;">
                        <p>出口</p>
                        <input type="text"
                               :value="ccjiesuan.out_door_post_name" />
                    </div>
                    <div>
                        <p>出场时间</p>
                        <input type="text"
                               :value="ccjiesuan.exit_time" />
                    </div>
                </div>
                <div class="ledes">
                    <div class="one">
                        <p class="title-one1">入口显示屏内容：</p>
                        <div class="ledxianshi">
                            <span class="led">{{ccjiesuan.inlet_led}}</span>
                        </div>
                    </div>
                    <div class="two">
                        <p class="title-one1">出口显示屏内容：</p>
                        <div class="ledxianshi">
                            <span class="led">{{ccjiesuan.export_led}}</span>
                        </div>
                    </div>
                </div>
                <div class="imgesss">
                    <div class="one">
                        <!-- <viewer style="z-index:100000000"> -->
                        <img style="width:226px;height:186px;"
                             :src="ccjiesuan.inlet_image" />
                        <!-- </viewer> -->
                    </div>
                    <div class="two right_box_img"
                         style="margin-left: 18px;">
                        <div class="two_sdsd">
                            <img :src="ccjiesuan.inlet_img"
                                 alt />
                        </div>
                        <div class="two_sdsd1">
                            {{ccjiesuan.license}}
                        </div>
                    </div>
                    <div class="one"
                         style="margin-left: 36px;">
                        <!-- <viewer style="z-index:100000000"> -->
                        <img style="width:226px;height:186px;"
                             :src="ccjiesuan.fullimg" />
                        <!-- </viewer> -->
                    </div>
                    <div class="two right_box_img"
                         style="margin-left: 18px;">
                        <div class="two_sdsd">
                            <img :src="ccjiesuan.smallimg"
                                 alt />
                        </div>
                        <div class="two_sdsd1">{{ccjiesuan.license}}</div>
                    </div>
                </div>
                <div style="margin-top:20px">
                    <span class="btn_one"
                          @click="Confirm">开闸</span>
                    <span class="btn_two"
                          @click="openedess">确认收费</span>
                </div>
            </div>
        </div>
        <!--提示音-->
        <el-dialog :visible.sync="romptsound"
                   :show-close="false"
                   :close-on-click-modal="false">
            <div class="appearing">
                <div class="login-titel">
                    <div class="login-titel-1">出场结算</div>
                    <div class=" login-titel-2"
                         @click="delsromptsound()">
                        <div class="login-titel-2-1"></div>
                    </div>
                </div>
                <div class="anount">
                    <div class="anount-title">提示语:</div>
                    <div class="anount-input">
                        <el-select class="selectes"
                                   :popper-append-to-body="false"
                                   popper-class="select-option"
                                   v-model="prompt"
                                   placeholder="请选择提示语">
                            <el-option v-for="item in soundData.chu"
                                       :key="item"
                                       :label="item"
                                       :value="item"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="anount">
                    <div class="button"
                         @click="appearingBtnromptsound()">确定</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Camera from './Camera.vue'
import Cameratwo from './Cameratwo.vue'
import { isEmpty } from '../utils/common.js'
import { Login, DoorGet, CameraGet, ListQuery,menuarrmod,menuarrload
    ,menuarropen,ListGet, ListDel ,menuarradd} from '../api/api.js'
import { Message } from "element-ui";
export default {
  name: 'HelloWorld',
  components: {
    Camera,
    Cameratwo
  },
  data() {
    return {
              ccjiesuan: {},

           chuchangjiesuan: false,
      valueNum: 'license',
      peeling: "默认背景",//切换主题
      screenWidth: document.documentElement.clientWidth - 10 + 'px',//屏幕宽度
      screenHeight: document.documentElement.clientHeight - 10 + 'px',//屏幕高度
      head: {
        count: 0,//车位总数
        present: 0,//剩余车位数
        total_amount: 0.00,//当班应收总额
      },//头部数据
      userInfo: {},//用户信息
      communityData: [],//小区信息
      ws: "",//摄像头1(左边摄像头)
      sn: "",//设备sn1
      ws1: "",//摄像头2(右边摄像头)
      sn1: "",//设备sn2
      snStatus: 1,//1入口2出口
      sn1Status: 2,//1入口2出口
      iscamera: false,//摄像头1
      iscamera1: false,//摄像头2
      snData: {},//左侧车牌数据
      sn1Data: {},//右侧车牌数据
      bgImg: 1,//菜单1进出记录2在场记录3无牌记录4设备
      searches: '',//搜索内容
      tableData: [],//下面列表数据
      dialogVisibleLog: false,//登录弹框
      dialogVisiblexq: false,//小区弹框
      dialogVisiblemg: false,//门岗弹框
      logName: '登录',//登录名
      logFrom: {},//登录信息
      letters: [
        { id: 0, name: '全部' },
        { id: 1, name: 'A' },
        { id: 2, name: 'B' },
        { id: 3, name: 'C' },
        { id: 4, name: 'D' },
        { id: 5, name: 'E' },
        { id: 6, name: 'F' },
        { id: 7, name: 'G' },
        { id: 8, name: 'H' },
        { id: 9, name: 'I' },
        { id: 10, name: 'J' },
        { id: 11, name: 'K' },
        { id: 12, name: 'L' },
        { id: 13, name: 'M' },
        { id: 14, name: 'N' },
        { id: 15, name: 'O' },
        { id: 16, name: 'P' },
        { id: 17, name: 'Q' },
        { id: 18, name: 'R' },
        { id: 19, name: 'S' },
        { id: 20, name: 'T' },
        { id: 21, name: 'U' },
        { id: 22, name: 'V' },
        { id: 23, name: 'W' },
        { id: 24, name: 'X' },
        { id: 25, name: 'Y' },
        { id: 26, name: 'Z' }
      ],
      zimu: "全部",//选择的字母
      doorData: [],//门岗数据
      cameraData: [],//摄像头数据
      communityInfo: {},//选择的小区信息
      doorInfo: [],//选择的门岗数据
      all_checked: false,//全选
      dialogVisibleAppearing: false,//出场弹框
      outCameraData: [],//摄像头出口数据
      outFrom: {},//出场数据
      outFromSn: '',//出场设备sn
      dialogVisibleMod: false,//修改弹框
      modFrom: {},//修改信息
      inputNumber: [7, 8, 9, 4, 5, 6, 1, 2, 3, 0, '.'],//数字
      inputWord: ["京", "沪", "浙", "苏", "粤", "鲁", "晋", "冀", "豫", "川", "渝", "辽", "吉", "黑", "皖", "鄂", "津", "贵", "云", "桂", "琼", "青", "新", "藏", "蒙", "宁", "甘", "陕", "闽", "赣", "湘", "港", "澳", "台", "学", "警", "使", "民", "航", "领"],//字
      inputScope: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
      dialogVisible: false,//键盘弹框
      Openinggate:false,//开闸弹框
      OpeningName:'入场开闸',
      circumstances:false,
      sumbitFrom:{
        license:"",
        mobile:"",
      },
      valueNumcru:'license',
      situationtk:false,
      romptsound:false,
      soundData:{},
      prompt:''
    }
  },
  created() {
    this.init();
    this.clients();
  },
  methods: {
     async appearingBtnromptsound(){
         if(this.prompt){
 const data =await menuarropen({
            sn:this.ccjiesuan.sn,
            id:this.ccjiesuan.id,
            prompt:this.prompt
        })
        console.log(data)
        if(data.status=='success'){
            Message.success('开闸成功');
            this.chuchangjiesuan=false
              this.romptsound=false
        }else{
            Message.success(data.message);

        }
         }else{
              Message.warning('请选择提示语');
         }
 
      },
      delsromptsound(){
          this.romptsound=false
      },
        //打开开闸弹框
    async openedess(){
        // if(item.method){
        //     this.OpeningName='出场开闸'
         
        // }else{
        //     this.OpeningName='入场开闸'
        // }
        const data =await menuarropen({
            sn:this.ccjiesuan.sn,
            id:this.ccjiesuan.id
        })
        console.log(data)
        if(data.status=='success'){
            Message.success('开闸成功');
          this.chuchangjiesuan=false
              this.romptsound=false
        }else{
            Message.success(data.message);

        }
    },
     async Confirm(){
          
          const data =await menuarrload({

        })
        this.soundData=data.data
         this.romptsound=true


        
      },
       //特殊情况入场弹框
       situationtkok(){
        this.sumbitFrom={
            license:'',
            mobile:''
        }
        this.outCameraData = this.cameraData.filter(item => item.type == 1);
        console.log( this.outCameraData)
        this.situationtk=true
    },
     //特殊入场
     async sumbitedail(){
        const data =await menuarradd({
            sn:this.outFromSn,
            license:this.sumbitFrom.license,
            mobile:this.sumbitFrom.mobile,
        })
        console.log(data)
        if(data.status=='success'){
            Message.success('入成功');
            this.dialogVisible=false
            this.situationtk=false
        }else{
            Message.success(data.message);

        }
    },
    //特殊出场
    async sumbitAdd(){
        const data =await menuarradd({
            sn:this.outFromSn,
            license:this.sumbitFrom.license,
            mobile:this.sumbitFrom.mobile,
        })
        console.log(data)
        if(data.status=='success'){
            Message.success('出场成功');
            this.dialogVisible=false
            this.circumstances=false
        }else{
            Message.success(data.message);

        }
    },
      //车牌输入框聚焦打开键盘
      focucirc(item) {
        console.log( this.dialogVisible)
      this.valueNumcru = item
      this.dialogVisible = true
    },
    circumstancesdel(){
      
        this.circumstances=false
     
    },
    //特殊情况出场弹框
    circumstancesok(){
        this.sumbitFrom={
            license:'',
            mobile:''
        }
        this.outCameraData = this.cameraData.filter(item => item.type == 2);
        console.log( this.outCameraData)
        this.circumstances=true
    },
    //打开开闸弹框
    async open(item){
        // if(item.method){
        //     this.OpeningName='出场开闸'
         
        // }else{
        //     this.OpeningName='入场开闸'
        // }
        const data =await menuarropen({
            sn:item.sn,
            id:item.id
        })
        console.log(data)
        if(data.status=='success'){
            Message.success('开闸成功');
        }else{
            Message.success(data.message);

        }
    },
    //修改车牌号确认
    async modBtn(){

        const data =await menuarrmod({
            id:this.modFrom.id,
            license:this.modFrom.license,
            mobile:this.modFrom.mobile,
            community_id:this.communityInfo.id
        })
        console.log(data,"5555")
        if(data.status=='success'){
            Message.success('修改成功');
            this.dialogVisible=false
            this.dialogVisibleMod=false
        }else{
            Message.success(data.message);

        }

    },
    //键盘选择
    numberkey(item) {
        if(this.dialogVisibleMod){
            if (this.valueNum == 'license') {
        if (!this.modFrom.license) {
          this.modFrom.license = item
        } else {
          this.modFrom.license += item
        }
      }
      if (this.valueNum == 'mobile') {
        if (!this.modFrom.mobile) {
          this.modFrom.mobile = item
        } else {
          this.modFrom.mobile += item
        }
      }
        }
        if(this.circumstances){
            if (this.valueNumcru == 'license') {
        if (!this.sumbitFrom.license) {
          this.sumbitFrom.license = item
        } else {
          this.sumbitFrom.license += item
        }
      }
      if (this.valueNumcru == 'mobile') {
        if (!this.sumbitFrom.mobile) {
          this.sumbitFrom.mobile = item
        } else {
          this.sumbitFrom.mobile += item
        }
      }
        }
        if(this.situationtk){
            if (this.valueNumcru == 'license') {
        if (!this.sumbitFrom.license) {
          this.sumbitFrom.license = item
        } else {
          this.sumbitFrom.license += item
        }
      }
      if (this.valueNumcru == 'mobile') {
        if (!this.sumbitFrom.mobile) {
          this.sumbitFrom.mobile = item
        } else {
          this.sumbitFrom.mobile += item
        }
      }
        }
    },
    //关闭键盘弹框
    delkey() {
      this.dialogVisible = false
    },
    //车牌输入框聚焦打开键盘
    focusj(item) {
      this.valueNum = item
      this.dialogVisible = true
    },
    //点击选择修改车牌
    choose(p) {
      this.myData[this.nowIpnut] = p;
      var item = this.checkOrder[this.nowIpnut]
    },
    //在场修改
    Modifythes(item) {
      this.dialogVisibleMod = true;
      const { id, license, mobile } = item
      this.$set(this.modFrom, 'id', id)
      this.$set(this.modFrom, 'license', license)
      this.$set(this.modFrom, 'mobile', mobile)
    },
    //出场弹框确定
    async appearingBtn() {
      if (isEmpty(this.outFromSn)) {
        Message.error('请选择出口');
        return;
      }
      let data = await ListDel(this.outFrom);
      if (data.status == "success") {
        Message.success('出场结算成功');
        this.dels();
        this.Searches()
      }
    },
    //当下拉选择框值变化触发
    selectOption() {
      this.outFrom.sn = this.outFromSn
    },
    //点击取消出场结算弹框
    dels() {
      this.dialogVisibleAppearing = false;
    },
    //点击出场
    appearing(item) {
      this.outFrom.id = item.id;
      this.outFrom.community_id = this.communityInfo.id;
      this.dialogVisibleAppearing = true;
      this.outCameraData = this.cameraData.filter(item => item.type == 2);
    },
    //点击菜单展示数据列表
    enter(item) {
      this.bgImg = item
      this.tableData = [];
      this.Searches()
    },
    //获取列表数据
    async Searches() {
      let data = await ListQuery({
        community_id: this.communityInfo.id,
        user_id: this.userInfo.id,
        type: this.bgImg,
        name: this.searches,
      })
      if (data.status == "success") {
        this.tableData = data.data;
      }
    },
    //点击换班
    changeHanban() {
      this.dialogVisibleLog = true;
      this.logName = '换班';
    },
    //点击切换摄像头
    changeCameraqie1() {
      this.sn1 = '';
      this.ws1 = '';
      this.sn1Status = '';
      this.iscamera1 = false;
    },
    //右边边选择摄像头
    changeCamera1(item) {
        console.log(item)
      this.sn1 = item.sn;
      this.ws1 = item.host;
      this.sn1Status = item.type;
      this.iscamera1 = true;
      setTimeout(() => {
        this.$refs.cameratwo.init();
      }, 500)
    },
    //点击切换摄像头
    changeCameraqie() {
      this.sn = '';
      this.ws = '';
      this.snStatus = '';
      this.iscamera = false;
    },
    //左边选择摄像头
    changeCamera(item) {
        console.log(item)
      this.sn = item.sn;
      this.ws = item.host;
      this.snStatus = item.type;
      this.iscamera = true;
      setTimeout(() => {
        this.$refs.camera.init();
      }, 500)
    },
    //获取摄像头列表
    async camera() {
      this.iscamera = false;//摄像头1
      this.iscamera1 = false;//摄像头
      let data = await CameraGet({
        user_id: this.userInfo.id,
        community_id: this.communityInfo.id,
        token: this.userInfo.token,
        door: JSON.stringify(this.doorInfo)
      });
      if (data.status == "success") {
        this.dialogVisiblemg = false;
        this.cameraData = data.data;
        this.head = data.list
      }
    },
    //点击门岗确定
    summbitdoor() {
      this.doorInfo = this.doorData.filter(item => item.checked == true);
      if (isEmpty(this.doorInfo)) {
        Message.error('请选择门岗');
      }
      localStorage.setItem('doorInfo', JSON.stringify(this.doorInfo));
      this.camera();
      this.Searches()
    },
    //点击门岗全选
    allClick() {
      this.doorData.forEach(item => {
        if (this.all_checked == false) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
    },
    //点击小区下一步
    async xqnet() {
      if (isEmpty(this.communityInfo)) {
        Message.error('请选择小区');
        return;
      }
      localStorage.setItem('communityInfo', JSON.stringify(this.communityInfo));
      this.getDoor();
      this.dialogVisiblexq = false;
    },
    //获取门岗列表
    async getDoor() {
      let data = await DoorGet({ id: this.communityInfo.id });
      if (data.status == "success") {
        this.doorData = data.data;
        localStorage.setItem('doorData', JSON.stringify(data.data));
        this.dialogVisiblemg = true;
      }
    },
    //选择停车场
    wyClickHandler(item) {
      this.communityInfo = item;
    },
    //选择字母
    selectQb(name) {
      this.zimu = name;
      if (name === '全部') {
        this.communityData = this.userInfo.community;
        return;
      }
      this.communityData = this.userInfo.community.filter(item => item.acronym === name);
    },
    //点击取消登录弹框
    del() {
      this.dialogVisibleLog = false;
    },
    //登录
    async logins() {
      this.iscamera = false;//摄像头1
      this.iscamera1 = false;//摄像头
      let data = await Login(this.logFrom);
      if (data.status == "success") {
        this.userInfo = data.data;
        this.communityData = data.data.community;
        localStorage.setItem('userInfo', JSON.stringify(data.data));
        this.del();
        this.mqtt(data.data.token);
        this.dialogVisiblexq = true;
      }
    },
    //修改弹框取消
    modcp() {
      this.dialogVisibleMod = !this.dialogVisibleMod
    },
    //初始化数据
    init() {
      let user = JSON.parse(localStorage.getItem('userInfo'));

      if (isEmpty(user)) {
        this.dialogVisibleLog = true;
        return;
      }
      this.userInfo = user;
      this.mqtt(user.token);
      this.communityData = user.community;
      let community = JSON.parse(localStorage.getItem('communityInfo'));
      if (isEmpty(community)) {
        this.dialogVisiblexq = true;
        return;
      }
      this.communityInfo = community;
      let doorInfo = JSON.parse(localStorage.getItem('doorInfo'));
      if (isEmpty(doorInfo)) {
        this.getDoor();
        this.dialogVisiblemg = true;
        return;
      }
      this.doorInfo = doorInfo;
      this.camera();
      this.Searches();
    },
    // 切换主题方式1：修改全局CSS变量
    changeTheme(color) {
      if (color === '#ffffff') {
        this.peeling = "白色背景"
        document.documentElement.style.setProperty("--background_color", '#ffffff');
        document.documentElement.style.setProperty("--size_color", '#000000');
      } else {
        this.peeling = "默认背景"
        document.documentElement.style.setProperty("--background_color", '#1c2536');
        document.documentElement.style.setProperty("--size_color", '#edebeb');
      }
    },
    //mqtt监听接收
    clients() {
      let that = this;
      that.$pubic.mqtt = async (topic, message) => {
        try {
          let item = JSON.parse(message)
          console.log('接收推送信息:', item)
            console.log(item.status,"判断")
          if(item.status==1){
              this.chuchangjiesuan=false
          }else{
          let data = await ListGet(item);
          console.log('接收推送信息-查询的数据:', data.data)
                  let resp = await CameraGet({
            user_id: this.userInfo.id,
            community_id: this.communityInfo.id,
            token: this.userInfo.token,
            door: JSON.stringify(this.doorInfo)
        });
        if (resp.status == "success") {
            this.head = resp.list
        }
          if(data.data.sn==this.sn){
            this.snData=data.data
          }
          if(data.data.sn==this.sn1){
            this.sn1Data=data.data
          }
          if (data.status == "success" && that.bgImg != 4) {
            that.tableData.unshift(data.data)
          }
          if(data.data.price&&Number(data.data.price)>0){
              this.chuchangjiesuan=true
              this.ccjiesuan=data.data
              this.ccjiesuan.exit_time=this.getDate(   this.ccjiesuan.exit_time)
              this.ccjiesuan.entry_time=this.getDate(   this.ccjiesuan.entry_time)
          }
          }
        } catch (e) {
          console.log("Caught: " + e.message)
        }
      }
    },
    //mqtt订阅
    mqtt(clientId) {
      this.$client.subscribe(clientId, (err) => {
        console.log('订阅成功!' + clientId)
      })
    },
    //时间戳转日期
    getDate(date) {
      if (isEmpty(date)) {
        return '';
      }
      var date = new Date(date * 1000); // 参数需要毫秒数，所以这里将秒数乘于 1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      var h = date.getHours() + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //计算两个时间差
    getDateTime(date1, date2) {
      if (isEmpty(date1) || isEmpty(date2)) {
        return '';
      }
      //计算
      var m = 0;
      let s = Number(date2) - Number(date1);
      m = Math.ceil(s / 60);
      s = s - m * 60;
      var h = Math.floor(m / 60);
      m = m - h * 60;
      return h + "小时" + m + "分" + s + "秒";
    },
  }
}
</script>

<style lang="less" scoped>
.box {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: absolute;
	color: var(--size_color1);
	font-size: calc(100vw * 18 / 1920);

	.grid-content {
		width: 100%;
		height: 7%;
		line-height: 64px;
		background: var(--background_color);
		border: 2px solid var(--border_color);
		display: flex;
		align-items: center;

		.public-box {
			margin-left: 2%;
			width: 96%;
			height: 60%;
			float: left;
			display: flex;
			align-items: center;

			div {
				float: left;
				height: 100%;
			}

			.one-grid {
				width: 2.5%;
				height: 90%;
				background: url(../assets/logo.png) no-repeat;
				background-size: 100% 100%;
			}

			.two-grid {
				width: 15%;
				display: flex;
				overflow: hidden;
				align-items: center;
			}

			.three-grid {
				margin-left: 1%;
				width: 10%;
				display: flex;
				overflow: hidden;
				align-items: center;
				font-weight: 400;
				color: var(--size_color1);

				.title3 {
					font-weight: 400;
					color: var(--size_color2);
				}
			}

			.four-grid {
				margin-left: 1%;
				width: 12%;
				display: flex;
				overflow: hidden;
				align-items: center;
				font-weight: 400;
				color: var(--size_color1);

				.title3 {
					font-weight: 400;
					color: var(--size_color2);
				}
			}

			.five-grid {
				width: 3%;
				height: 50%;
				display: flex;
				overflow: hidden;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				margin-right: 3%;
				font-weight: 400;
				color: var(--size_color1);
				border: 2px solid var(--border_color);
			}

			.qi-grid {
				width: 7%;
				height: 50%;
				margin-right: 3%;
				display: flex;
				overflow: hidden;
				align-items: center;
				justify-content: center;
				border: 2px solid var(--border_color);
				color: var(--size_color1);
			}
		}
	}

	.two-content {
		width: 100%;
		height: 43%;
		background: var(--background_color);
		display: flex;
		justify-content: center;
		align-items: center;

		.two-content-box {
			width: 98%;
			height: 95%;
			display: flex;
			justify-content: center;
			align-items: center;

			.essas {
				float: left;
			}

			.vidoes {
				width: 28%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				background: url(../assets/jiao1.png) no-repeat;
				background-size: 100% 100%;

				.camera-1 {
					width: 100%;
					height: 10%;
					z-index: 999;
					display: flex;
					align-items: center;

					.camera-1-1 {
						width: 8%;
						height: 70%;
						margin-left: 2%;
						float: left;
						background: url(../assets/live.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.camera-4 {
					width: 100%;
					height: 80%;
					display: flex;
					flex-wrap: wrap;
				}

				.camera-2 {
					width: 100%;
					height: 80%;
					display: flex;
					flex-wrap: wrap;
					overflow: auto;

					.camera-2-1 {
						width: 25%;
						margin-left: 6%;
						margin-top: 5%;
						height: 20%;
						display: flex;
						justify-content: center;
						align-items: center;
						float: left;
						background: url(../assets/car_img_xiaoqu.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				/*修改滚动条样式*/
				.camera-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.camera-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.camera-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.camera-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.camera-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}

				.camera-3 {
					width: 100%;
					height: 10%;
					z-index: 999;
					display: flex;
					margin-top: auto;
					align-items: center;

					.camera-3-1 {
						width: 8%;
						height: 70%;
						margin-right: 2%;
						display: flex;
						margin-left: auto;
						background: url(../assets/carphoto.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}

			.texts {
				width: 18%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;

				.text-1 {
					width: 100%;
					height: 48%;
					background: url(../assets/jiao2.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					margin-bottom: auto;
					justify-content: center;
					flex-wrap: wrap;

					.text-1-1 {
						width: 100%;
						height: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: auto;
						font-weight: 400;
						text-align: center;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.text-1-2 {
						width: 90%;
						height: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: auto;
						font-weight: 800;
						color: var(--size_color1);
						font-size: calc(100vw * 42 / 1920);
						text-align: center;
					}
				}

				.text-2 {
					width: 100%;
					height: 48%;
					display: flex;
					margin-top: auto;
					background: url(../assets/jiao3.png) no-repeat;
					background-size: 100% 100%;

					.text-2-1 {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;

						div {
							width: 90%;
							height: 20%;
							display: flex;
							align-items: center;
							font-size: calc(100vw * 14 / 1920);
						}
					}

					.text-2-2 {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;

						div {
							width: 90%;
							height: 10%;
							display: flex;
							align-items: center;
							font-size: calc(100vw * 14 / 1920);
						}

						.text-2-2-1 {
							font-size: calc(100vw * 18 / 1920);
						}
					}
				}
			}
		}
	}

	.three-content {
		width: 100%;
		height: 50%;
		background: var(--background_color);
		display: flex;
		justify-content: center;
		align-items: center;

		.three-content-box {
			width: 96%;
			height: 95%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			.bg-img1 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background: url(../assets/jinchu-sel.png) no-repeat;
				background-size: 100% 100%;

				.three-content-box-1 {
					width: 100%;
					height: 8%;
					display: flex;

					.box-span-1 {
						width: 7%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-2 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						float: left;
					}

					.box-span-3 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-4 {
						width: 7%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-5 {
						width: 17.2%;
						height: 100%;
						display: flex;
						margin-left: auto;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 100%;
							height: 80%;
							background: transparent !important;
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color2);
							outline: none;
							border: 0px;
						}

						input::-webkit-input-placeholder {
							color: var(--size_color2);
						}

						.one {
							display: flex;
							width: 20%;
							margin-left: auto;
							align-items: center;
							text-align: center;
						}
					}
				}

				.three-content-box-2 {
					width: 100%;
					height: 90%;
					display: flex;
					overflow: auto;

					.three-content-box-table {
						width: 100%;
						height: 100%;
						display: flex;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						/deep/.el-table {
							background: transparent !important;
							color: var(--size_color);

							.cell {
								padding-left: 34px !important;
							}

							tr {
								background-color: transparent !important;

								td {
									border-bottom: none;
								}
							}

							.has-gutter {
								color: rgba(122, 230, 255, 1);

								th {
									background-color: transparent !important;
									border-bottom: none;
								}
							}

							.el-table__body-wrapper {
								height: 319px;
								overflow-y: auto;
							}

							/*修改滚动条样式*/
							.el-table__body-wrapper::-webkit-scrollbar {
								width: 10px;
								height: 10px;
								/**/
							}

							.el-table__body-wrapper::-webkit-scrollbar-track {
								border-radius: 2px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb {
								background: #4f93b1;
								border-radius: 10px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
								background: #4f93b1;
							}

							.el-table__body-wrapper::-webkit-scrollbar-corner {
								background: #4f93b1;
							}
						}

						/deep/.el-table::before {
							background-color: transparent !important;
						}

						/deep/
							.el-table--enable-row-hover
							.el-table__body
							tr:hover
							> td {
							background-color: #2c5379 !important;
						}
					}
				}

				/*修改滚动条样式*/
				.three-content-box-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.three-content-box-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.three-content-box-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}
			}

			.bg-img2 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background: url(../assets/dangqian.png) no-repeat;
				background-size: 100% 100%;

				.three-content-box-1 {
					width: 100%;
					height: 8%;
					display: flex;

					.box-span-1 {
						width: 7%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-2 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						float: left;
					}

					.box-span-3 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-4 {
						width: 7%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-5 {
						width: 17.2%;
						height: 100%;
						display: flex;
						margin-left: auto;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 100%;
							height: 80%;
							background: transparent !important;
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color2);
							outline: none;
							border: 0px;
						}

						input::-webkit-input-placeholder {
							color: var(--size_color2);
						}

						.one {
							display: flex;
							width: 20%;
							margin-left: auto;
							align-items: center;
							text-align: center;
						}
					}
				}

				.three-content-box-2 {
					width: 100%;
					height: 90%;
					display: flex;
					overflow: auto;

					.three-content-box-table {
						width: 100%;
						height: 100%;
						display: flex;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						/deep/.el-table {
							background: transparent !important;
							color: var(--size_color);

							.cell {
								padding-left: 34px !important;
							}

							tr {
								background-color: transparent !important;

								td {
									border-bottom: none;
								}
							}

							.has-gutter {
								color: rgba(122, 230, 255, 1);

								th {
									background-color: transparent !important;
									border-bottom: none;
								}
							}

							.el-table__body-wrapper {
								height: 319px;
								overflow-y: auto;
							}

							/*修改滚动条样式*/
							.el-table__body-wrapper::-webkit-scrollbar {
								width: 10px;
								height: 10px;
								/**/
							}

							.el-table__body-wrapper::-webkit-scrollbar-track {
								border-radius: 2px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb {
								background: #4f93b1;
								border-radius: 10px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
								background: #4f93b1;
							}

							.el-table__body-wrapper::-webkit-scrollbar-corner {
								background: #4f93b1;
							}
						}

						/deep/.el-table::before {
							background-color: transparent !important;
						}

						/deep/
							.el-table--enable-row-hover
							.el-table__body
							tr:hover
							> td {
							background-color: #2c5379 !important;
						}
					}
				}

				/*修改滚动条样式*/
				.three-content-box-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.three-content-box-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.three-content-box-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}
			}

			.bg-img3 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background: url(../assets/wupai.png) no-repeat;
				background-size: 100% 100%;

				.three-content-box-1 {
					width: 100%;
					height: 8%;
					display: flex;

					.box-span-1 {
						width: 7%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-2 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						float: left;
					}

					.box-span-3 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-4 {
						width: 7%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-5 {
						width: 17.2%;
						height: 100%;
						display: flex;
						margin-left: auto;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 100%;
							height: 80%;
							background: transparent !important;
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color2);
							outline: none;
							border: 0px;
						}

						input::-webkit-input-placeholder {
							color: var(--size_color2);
						}

						.one {
							display: flex;
							width: 20%;
							margin-left: auto;
							align-items: center;
							text-align: center;
						}
					}
				}

				.three-content-box-2 {
					width: 100%;
					height: 90%;
					display: flex;
					overflow: auto;

					.three-content-box-table {
						width: 100%;
						height: 100%;
						display: flex;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						/deep/.el-table {
							background: transparent !important;
							color: var(--size_color);

							.cell {
								padding-left: 34px !important;
							}

							tr {
								background-color: transparent !important;

								td {
									border-bottom: none;
								}
							}

							.has-gutter {
								color: rgba(122, 230, 255, 1);

								th {
									background-color: transparent !important;
									border-bottom: none;
								}
							}

							.el-table__body-wrapper {
								height: 319px;
								overflow-y: auto;
							}

							/*修改滚动条样式*/
							.el-table__body-wrapper::-webkit-scrollbar {
								width: 10px;
								height: 10px;
								/**/
							}

							.el-table__body-wrapper::-webkit-scrollbar-track {
								border-radius: 2px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb {
								background: #4f93b1;
								border-radius: 10px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
								background: #4f93b1;
							}

							.el-table__body-wrapper::-webkit-scrollbar-corner {
								background: #4f93b1;
							}
						}

						/deep/.el-table::before {
							background-color: transparent !important;
						}

						/deep/
							.el-table--enable-row-hover
							.el-table__body
							tr:hover
							> td {
							background-color: #2c5379 !important;
						}
					}
				}

				/*修改滚动条样式*/
				.three-content-box-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.three-content-box-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.three-content-box-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}
			}

			.bg-img4 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				background: url(../assets/shebei.png) no-repeat;
				background-size: 100% 100%;

				.three-content-box-1 {
					width: 100%;
					height: 8%;
					display: flex;

					.box-span-1 {
						width: 7%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-2 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						float: left;
					}

					.box-span-3 {
						width: 9%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-4 {
						width: 7%;
						height: 100%;
						margin-left: 1.2%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.box-span-5 {
						width: 17.2%;
						height: 100%;
						display: flex;
						margin-left: auto;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 100%;
							height: 80%;
							background: transparent !important;
							font-size: 14px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color2);
							outline: none;
							border: 0px;
						}

						input::-webkit-input-placeholder {
							color: var(--size_color2);
						}

						.one {
							display: flex;
							width: 20%;
							margin-left: auto;
							align-items: center;
							text-align: center;
						}
					}
				}

				.three-content-box-2 {
					width: 100%;
					height: 90%;
					display: flex;
					overflow: auto;

					.three-content-box-table {
						width: 100%;
						height: 100%;
						display: flex;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						/deep/.el-table {
							background: transparent !important;
							color: var(--size_color);

							.cell {
								padding-left: 34px !important;
							}

							tr {
								background-color: transparent !important;

								td {
									border-bottom: none;
								}
							}

							.has-gutter {
								color: rgba(122, 230, 255, 1);

								th {
									background-color: transparent !important;
									border-bottom: none;
								}
							}

							.el-table__body-wrapper {
								height: 319px;
								overflow-y: auto;
							}

							/*修改滚动条样式*/
							.el-table__body-wrapper::-webkit-scrollbar {
								width: 10px;
								height: 10px;
								/**/
							}

							.el-table__body-wrapper::-webkit-scrollbar-track {
								border-radius: 2px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb {
								background: #4f93b1;
								border-radius: 10px;
							}

							.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
								background: #4f93b1;
							}

							.el-table__body-wrapper::-webkit-scrollbar-corner {
								background: #4f93b1;
							}
						}

						/deep/ .el-table::before {
							background-color: transparent !important;
						}

						/deep/
							.el-table--enable-row-hover
							.el-table__body
							tr:hover
							> td {
							background-color: #2c5379 !important;
						}
					}
				}

				/*修改滚动条样式*/
				.three-content-box-2::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.three-content-box-2::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.three-content-box-2::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.three-content-box-2::-webkit-scrollbar-corner {
					background: #4f93b1;
				}
			}
		}
	}

	/deep/ .el-dialog {
		z-index: 9999;
		position: relative;
		border-radius: 2px;
		box-sizing: border-box;
		background: transparent !important;

		.el-dialog__header {
			display: none;
		}

		.el-dialog__body {
			word-break: break-all;
			padding: 0 !important;

			.el-input__inner {
				border-radius: 4px;
				border: 1px solid var(--border_color);
				box-sizing: border-box;
				color: #606266;
				display: inline-block;
				font-size: inherit;
				width: 100%;
				background: transparent !important;
			}

			.login {
				background: url(../assets/bg.png) no-repeat;
				background-size: 100% 100%;
				width: 315px;
				height: 370px;
				margin: 0 auto;
				z-index: 9999;

				.login-titel {
					width: 100%;
					height: 17%;
					display: flex;
					font-size: calc(100vw * 28 / 1920);
					color: var(--size_color1);

					.login-titel-1 {
						width: 85%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.login-titel-2 {
						width: 15%;
						height: 100%;
						display: flex;
						justify-content: center;

						.login-titel-2-1 {
							width: 23px;
							height: 23px;
							display: flex;
							justify-content: center;
							margin-top: 12%;
							background: url(../assets/car_buttom_delete.png)
								no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.anount {
					width: 100%;
					height: 26%;
					flex-wrap: wrap;
					font-size: calc(100vw * 22 / 1920);

					.anount-title {
						width: 100%;
						height: 30%;
						display: flex;
						align-items: center;
						color: var(--size_color1);
						text-indent: 2em;
						font-size: calc(100vw * 22 / 1920);
					}

					.anount-input {
						width: 90%;
						height: 40%;
						margin: 0 auto;
					}

					.button {
						width: 40%;
						height: 30%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						margin-top: 10%;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}

			.SelectcarPark {
				background: url(../assets/bg1.png) no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 500px;
				display: flex;
				flex-wrap: wrap;
				margin: 0 auto;

				.SelectcarPark-titel {
					width: 100%;
					height: 10%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: calc(100vw * 32 / 1920);
					color: var(--size_color1);
				}

				.SelectcarPark-zimu {
					width: 100%;
					height: 10%;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					font-size: calc(100vw * 14 / 1920);

					.zimu-1 {
						width: 2%;
						height: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 1%;
						font-weight: 600;
						color: var(--size_color);
						font-size: calc(100vw * 20 / 1920);
					}

					.zimu-1:hover {
						color: var(--size_color1);
					}

					.zimu-2 {
						width: 4%;
						height: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 2%;
						font-weight: 600;
						color: var(--size_color);
						font-size: calc(100vw * 20 / 1920);
					}

					.zimu-2:hover {
						color: var(--size_color1);
					}
				}

				.SelectcarPark-name {
					width: 98%;
					height: 60%;
					overflow: auto;
					display: flex;
					flex-wrap: wrap;
					font-size: calc(100vw * 18 / 1920);

					.SelectcarPark-name-1 {
						float: left;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 20%;
						height: 20%;
						font-size: calc(100vw * 30 / 1920);
						background: url(../assets/car_img_xiaoqu.png) no-repeat;
						background-size: 100% 100%;
						margin-left: 4%;
						margin-top: 4%;
						color: var(--size_color1);
					}

					.SelectcarPark-name-2 {
						float: left;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 20%;
						height: 20%;
						font-size: calc(100vw * 30 / 1920);
						background: url(../assets/car_img_xiaoqu1.png);
						background-size: 100% 100%;
						margin-left: 4%;
						margin-top: 4%;
						color: var(--size_color1);
					}
				}

				/*修改滚动条样式*/
				.SelectcarPark-name::-webkit-scrollbar {
					width: 10px;
					height: 10px;
					/**/
				}

				.SelectcarPark-name::-webkit-scrollbar-track {
					border-radius: 2px;
				}

				.SelectcarPark-name::-webkit-scrollbar-thumb {
					background: #4f93b1;
					border-radius: 10px;
				}

				.SelectcarPark-name::-webkit-scrollbar-thumb:hover {
					background: #4f93b1;
				}

				.SelectcarPark-name::-webkit-scrollbar-corner {
					background: #4f93b1;
				}

				.SelectcarPark-btn {
					width: 100%;
					height: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: calc(100vw * 18 / 1920);

					.button {
						width: 20%;
						height: 60%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}

			.Choosethepast {
				background: url(../assets/mengang.png) no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 418px;
				display: flex;
				flex-wrap: wrap;
				margin: 0 auto;

				.Choosethepast-titel {
					width: 100%;
					height: 15%;
					font-weight: 400;
					color: var(--size_color);
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-size: calc(100vw * 36 / 1920);
				}

				.checkboxes {
					margin: 0 auto;
					width: 90%;
					height: 70%;
					display: flex;
					flex-wrap: wrap;

					.checkboxes_one {
						width: 100%;
						height: 10%;
						display: flex;
						align-items: center;
						font-size: calc(100vw * 20 / 1920);

						input {
							width: 18px;
							height: 18px;
							border: 1px solid var(--border_color1);
							background-color: var(--background_color);
						}

						.table {
							font-size: 18px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color);
							font-size: calc(100vw * 20 / 1920);
							margin-left: 2%;
						}

						input:checked + .table {
							font-size: 18px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: var(--size_color1);
						}

						input {
							width: 18px;
							height: 18px;
							background-color: var(--background_color);
							border: 1px solid var(--size_color);
							border-radius: 2px;
							color: var(--size_color2);
							text-align: center;
							line-height: 15px;
							-webkit-appearance: none;
							-moz-appearance: none;
							-ms-appearance: none;
							-o-appearance: none;
							appearance: none;
							outline: none;
							cursor: pointer;
							outline: 0;
							line-height: 1;
							vertical-align: middle;
							display: inline-block;
							position: relative;
							white-space: nowrap;
						}

						input:hover {
							border-color: var(--size_color);
						}

						input:checked {
							color: var(--size_color1);
							background-color: var(--background_color);
							border: 1px solid var(--border_color1);
						}

						input:checked:after {
							transform: rotate(45deg) scaleY(1);
							height: 10px;
							left: 6px;
							top: 1px;
							width: 4px;
							box-sizing: content-box;
							content: '';
							border: 1px solid var(--border_color1);
							border-left: 0;
							border-top: 0;
							position: absolute;
							transition: transform 0.15s ease-in 0.05s,
								-webkit-transform 0.15s ease-in 0.05s;
							transform-origin: center;
						}
					}

					.checkboxes_two {
						width: 100%;
						height: 90%;
						flex-wrap: wrap;
						align-items: flex-start;
						overflow-y: auto;

						.check_one {
							display: flex;
							align-items: center;
							width: 32%;
							height: 12%;
							margin-top: 2%;
							float: left;
							font-size: calc(100vw * 20 / 1920);

							input {
								width: 18px;
								height: 18px;
								border: 1px solid var(--border_color1);
								background-color: var(--background_color);
							}

							.table {
								margin-left: 2%;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: var(--size_color);
							}

							input:checked + .table {
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: var(--size_color1);
							}

							input {
								width: 18px;
								height: 18px;
								background-color: var(--background_color);
								border: 1px solid var(--size_color);
								border-radius: 2px;
								color: var(--background_color);
								text-align: center;
								line-height: 15px;
								-webkit-appearance: none;
								-moz-appearance: none;
								-ms-appearance: none;
								-o-appearance: none;
								appearance: none;
								outline: none;
								cursor: pointer;
								outline: 0;
								line-height: 1;
								vertical-align: middle;
								display: inline-block;
								position: relative;
								white-space: nowrap;
							}

							input:hover {
								border-color: var(--size_color1);
							}

							input:checked {
								color: var(--size_color1);
								background-color: var(--background_color);
								border: 1px solid var(--size_color1);
							}

							input:checked:after {
								transform: rotate(45deg) scaleY(1);
								height: 10px;
								left: 6px;
								top: 1px;
								width: 4px;
								box-sizing: content-box;
								content: '';
								border: 1px solid var(--size_color1);
								border-left: 0;
								border-top: 0;
								position: absolute;
								transition: transform 0.15s ease-in 0.05s,
									-webkit-transform 0.15s ease-in 0.05s;
								transform-origin: center;
							}
						}
					}

					// /*修改滚动条样式*/
					.checkboxes_two::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}

					.checkboxes_two::-webkit-scrollbar-track {
						border-radius: 2px;
					}

					.checkboxes_two::-webkit-scrollbar-thumb {
						background: #4f93b1;
						border-radius: 10px;
					}

					.checkboxes_two::-webkit-scrollbar-thumb:hover {
						background: #4f93b1;
					}

					.checkboxes_two::-webkit-scrollbar-corner {
						background: #4f93b1;
					}
				}

				.button {
					width: 100%;
					height: 15%;
					display: flex;
					justify-content: center;
					align-items: center;

					.buttons {
						width: 20%;
						height: 60%;
						display: flex;
						border-radius: 4px;
						text-align: center;
						justify-content: center;
						align-items: center;
						background: var(--size_color1);
						color: var(--size_color);
						font-size: calc(100vw * 20 / 1920);
					}
				}
			}

			.appearing {
				background: url(../assets/bg.png) no-repeat;
				background-size: 100% 100%;
				width: 315px;
				height: 300px;
				margin: 0 auto;
				z-index: 9999;

				.login-titel {
					width: 100%;
					height: 17%;
					display: flex;
					font-size: calc(100vw * 22 / 1920);
					color: var(--size_color1);

					.login-titel-1 {
						width: 85%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.login-titel-2 {
						width: 15%;
						height: 100%;
						display: flex;
						justify-content: center;

						.login-titel-2-1 {
							width: 23px;
							height: 23px;
							display: flex;
							justify-content: center;
							margin-top: 12%;
							background: url(../assets/car_buttom_delete.png)
								no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.anount {
					width: 100%;
					height: 26%;
					margin-top: 5%;
					flex-wrap: wrap;
					font-size: calc(100vw * 18 / 1920);

					.anount-title {
						width: 100%;
						height: 30%;
						display: flex;
						align-items: center;
						color: var(--size_color1);
						margin-top: 5%;
						text-indent: 2em;
						font-size: calc(100vw * 18 / 1920);
					}

					.anount-input {
						margin-top: 5%;
						width: 90%;
						height: 40%;
						margin: 0 auto;

						.selectes {
							width: 100%;
							height: 100%;

							.el-input {
								.el-input__inner {
									width: 280px !important;
									height: 40px !important;
									border: 1px solid rgba(122, 230, 255, 1) !important;
									border-radius: 4px !important;
									background: transparent !important;
									font-size: 14px !important;
									color: var(--size_color1);
								}

								.el-select__caret {
									color: rgba(79, 147, 177, 1);
								}

								.el-input__inner::-webkit-input-placeholder {
									font-size: 13px;
									color: rgba(79, 147, 177, 1);
								}
							}

							.select-option {
								background-color: #3c7a96 !important;
								// background: transparent !important;

								.el-select-dropdown__empty {
									font-size: 14px;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: rgba(222, 222, 222, 1);
								}

								.el-select-dropdown__item {
									font-size: 14px;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: rgba(222, 222, 222, 1);
								}

								.el-select-dropdown__item:hover {
									background: rgba(
										122,
										230,
										255,
										0.3
									) !important;
								}
								.el-select-dropdown__item.hover {
									background: transparent !important;
									background: rgba(
										122,
										230,
										255,
										0.3
									) !important;
								}
							}
						}
					}
					.button {
						width: 40%;
						height: 35%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						margin-top: 15%;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}
			.car-mod {
				background: url(../assets/bg.png) no-repeat;
				background-size: 100% 100%;
				width: 315px;
				height: 370px;
				margin: 0 auto;
				z-index: 9999;
				.login-titel {
					width: 100%;
					height: 17%;
					display: flex;
					font-size: calc(100vw * 28 / 1920);
					color: var(--size_color1);
					.login-titel-1 {
						width: 85%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.login-titel-2 {
						width: 15%;
						height: 100%;
						display: flex;
						justify-content: center;
						.login-titel-2-1 {
							width: 23px;
							height: 23px;
							display: flex;
							justify-content: center;
							margin-top: 12%;
							background: url(../assets/car_buttom_delete.png)
								no-repeat;
							background-size: 100% 100%;
						}
					}
				}
				.anount {
					width: 100%;
					height: 26%;
					flex-wrap: wrap;
					font-size: calc(100vw * 22 / 1920);
					.anount-title {
						width: 100%;
						height: 30%;
						display: flex;
						align-items: center;
						color: var(--size_color1);
						text-indent: 2em;
						font-size: calc(100vw * 22 / 1920);
					}
					.anount-input {
						width: 90%;
						height: 40%;
						margin: 0 auto;
					}
					.button {
						width: 40%;
						height: 30%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						margin-top: 10%;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}
			.circumstances-mod {
				background: url(../assets/bg.png) no-repeat;
				background-size: 100% 100%;
				width: 400px;
				height: 430px;
				margin: 0 auto;
				z-index: 9999;
				.login-titel {
					width: 100%;
					height: 17%;
					display: flex;
					font-size: calc(100vw * 28 / 1920);
					color: var(--size_color1);
					.login-titel-1 {
						width: 85%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.login-titel-2 {
						width: 15%;
						height: 100%;
						display: flex;
						justify-content: center;
						.login-titel-2-1 {
							width: 23px;
							height: 23px;
							display: flex;
							justify-content: center;
							margin-top: 12%;
							background: url(../assets/car_buttom_delete.png)
								no-repeat;
							background-size: 100% 100%;
						}
					}
				}
				.anount {
					width: 100%;
					height: 20%;
					flex-wrap: wrap;
					font-size: calc(100vw * 22 / 1920);
					.anount-title {
						width: 100%;
						height: 30%;
						display: flex;
						align-items: center;
						color: var(--size_color1);
						text-indent: 2em;
						font-size: calc(100vw * 22 / 1920);
					}
					.anount-input {
						width: 90%;
						height: 40%;
						margin: 0 auto;
					}
					.button {
						width: 40%;
						height: 30%;
						display: flex;
						border-radius: 4px;
						justify-content: center;
						align-items: center;
						margin: 0 auto;
						margin-top: 10%;
						color: var(--size_color);
						background: rgba(79, 147, 177, 1);
						font-weight: 400;
					}
				}
			}
			.keyboard {
				width: 900px;
				height: 400px;
				position: fixed;
				background: url('../assets/querenruchang.png') no-repeat;
				background-size: 100% 100%;
				background-color: #1f2f43;
				position: relative;
				margin-top: 5%;
				z-index: 9999;
				border: solid 1px red;
				.content {
					width: 70%;
					height: 100%;
					float: left;
					.content-one {
						width: 100%;
						height: 50%;
						overflow: auto;
						.number-one {
							width: 7%;
							height: 15%;
							float: left;
							border: solid 1px var(--size_color1);
							margin-top: 1.5%;
							margin-left: 2.5%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: calc(100vw * 24 / 1920);
						}
					}
					/*修改滚动条样式*/
					.content-one::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}
					.content-one::-webkit-scrollbar-track {
						border-radius: 2px;
					}
					.content-one::-webkit-scrollbar-thumb {
						background: #4f93b1;
						border-radius: 10px;
					}
					.content-one::-webkit-scrollbar-thumb:hover {
						background: #4f93b1;
					}
					.content-one::-webkit-scrollbar-corner {
						background: #4f93b1;
					}
					.content-two {
						width: 100%;
						height: 50%;
						.number-one {
							width: 7%;
							height: 15%;
							float: left;
							border: solid 1px var(--size_color1);
							margin-top: 3%;
							margin-left: 3%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: calc(100vw * 24 / 1920);
						}
					}
					/*修改滚动条样式*/
					.content-two::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}
					.content-two::-webkit-scrollbar-track {
						border-radius: 2px;
					}
					.content-two::-webkit-scrollbar-thumb {
						background: #4f93b1;
						border-radius: 10px;
					}
					.content-two::-webkit-scrollbar-thumb:hover {
						background: #4f93b1;
					}
					.content-two::-webkit-scrollbar-corner {
						background: #4f93b1;
					}
				}
				.content-number {
					float: left;
					width: 30%;
					height: 100%;
					.head {
						width: 100%;
						height: 18%;
						display: flex;
						align-items: center;
						.del {
							width: 25px;
							height: 25px;
							display: flex;
							justify-content: center;
							align-items: center;
							background: url('../assets/jiantou.png');
							background-size: 100% 100%;
							margin-left: auto;
							margin-right: 3%;
							margin-top: -10px;
						}
					}
					.number {
						width: 100%;
						height: 82%;
						overflow: auto;
						.number-one {
							width: 24%;
							height: 20%;
							float: left;
							border: solid 1px var(--size_color1);
							margin-top: 2%;
							margin-left: 6%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: calc(100vw * 36 / 1920);
						}
					}
					/*修改滚动条样式*/
					.number::-webkit-scrollbar {
						width: 10px;
						height: 10px;
						/**/
					}
					.number::-webkit-scrollbar-track {
						border-radius: 2px;
					}
					.number::-webkit-scrollbar-thumb {
						background: #4f93b1;
						border-radius: 10px;
					}
					.number::-webkit-scrollbar-thumb:hover {
						background: #4f93b1;
					}
					.number::-webkit-scrollbar-corner {
						background: #4f93b1;
					}
				}
			}
		}
	}
	.btn3 {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(112, 209, 244, 1);
		cursor: pointer;
	}
	.btn1 {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(180, 242, 242, 1);
		cursor: pointer;
		margin-left: 21px;
	}
	.btn2 {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-left: 21px;
		cursor: pointer;
		color: rgba(112, 209, 244, 1);
	}
	.chuangchangjiesuan {
		position: fixed;
		z-index: 1888;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin-left: auto;
		margin-right: auto;
		margin-top: auto;
		margin-bottom: auto;
		background-color: rgba(0, 0, 0, 0.3);
		.chuangchangjiesuan-one {
			background: url(../assets/chuchangjiesuan.png) no-repeat;
			background-size: 100% 100%;
			width: 1140px;
			height: 700px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin-left: auto;
			margin-right: auto;
			margin-top: auto;
			margin-bottom: auto;
			border-radius: 2px;
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
			box-sizing: border-box;
			.right_box_img {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				div {
					height: 90px;
					width: 246px;
				}
			}
			.title {
				font-size: 18px;
				color: rgba(255, 255, 255, 1);
				text-align: right;
				margin-right: 99px;
				margin-top: 30px;
				span {
					font-size: 30px;
					color: rgba(255, 255, 255, 1);
				}
			}
			.input {
				display: flex;
				margin-left: 50px;
				margin-top: 22px;
				div {
					margin-left: 16px;
					p {
						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(204, 204, 204, 1);
					}
					input {
						width: 234px;
						height: 36px;
						margin-top: 8px;
						border: 1px solid rgba(77, 138, 161, 1);
						border-radius: 5px;
						background: transparent !important;
						font-size: 16px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						outline: none;
						text-indent: 14px;
					}
				}
			}
			.ledes {
				display: flex;
				.one {
					.title-one1 {
						margin-top: 23px;
						margin-left: 66px;
						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(204, 204, 204, 1);
					}
					.ledxianshi {
						margin-top: 8px;
						margin-left: 56px;
						width: 480px;
						height: 78px;
						font-size: 14px;
						color: rgba(88, 230, 241, 1);
						.led {
							display: inline-block;
							width: 224px;
							line-height: 20px;
							margin-left: 16px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}
					}
				}
				.two {
					.title-one1 {
						margin-top: 23px;
						margin-left: 50px;
						font-size: 14px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(204, 204, 204, 1);
					}
					.ledxianshi {
						margin-top: 8px;
						margin-left: 50px;
						width: 480px;
						height: 78px;
						font-size: 14px;
						color: rgba(88, 230, 241, 1);
						.led {
							display: inline-block;
							width: 224px;
							margin-left: 16px;
							line-height: 20px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}
					}
				}
			}
			.imgesss {
				margin-left: 66px;
				display: flex;
				.one {
					width: 224px;
					height: 184px;
					background: rgba(38, 68, 97, 1);
					border: 1px solid rgba(122, 230, 255, 1);
					opacity: 0.3;
				}
				.two {
					width: 246px;
					height: 184px;
					background: url(../assets/jiao2.png) no-repeat;
					background-size: 100%;
				}
			}
			.btn_one {
				display: inline-block;
				width: 114px;
				height: 39px;
				background: rgba(77, 138, 161, 1);
				opacity: 0.8;
				border-radius: 4px;
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(254, 255, 255, 1);
				text-align: center;
				line-height: 39px;
				cursor: pointer;
			}
			.btn_two {
				display: inline-block;
				width: 114px;
				height: 39px;
				background: rgba(79, 147, 177, 1);
				margin-left: 28px;
				border-radius: 4px;
				text-align: center;
				line-height: 39px;
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(254, 255, 255, 1);
				cursor: pointer;
			}
		}
	}
}
//  background: transparent !important;
</style>
